<template lang="pug">
  .tab-bar
    .tab-bar-item(v-for="tab in tabs",:selected="selectedTab(tab)", :key="tab.url", tag="div", @click="goNav(tab)", :class="{active: selectedTab(tab)}")
      img(:src="currentTabIcon(tab)")
      span {{tab.label}}
    .tab-bar-item(v-for="tab in extraTabs",:selected="selectedTab(tab)", :key="tab.url", tag="div", @click="goNav(tab)", :class="{active: selectedTab(tab)}", v-if="isExtraShow")
      img(:src="currentTabIcon(tab)")
      span {{tab.label}}
</template>

<script>
import redHome from '../assets/tabs/home-red.svg'
import blackHome from '../assets/tabs/home.svg'
import redSearch from '../assets/tabs/search-red.svg'
import blackSearch from '../assets/tabs/search.svg'
import redDiscount from '../assets/tabs/discount-red.svg'
import blackDiscout from '../assets/tabs/discount.svg'
import redProfile from '../assets/tabs/profile-red.svg'
import blackProfile from '../assets/tabs/profile.svg'
import Window from '../helpers/window'

export default {
  name: 'Tabs',
  data () {
    return {
      tabs: [
        {
          label: '首页',
          icon: blackHome,
          selectIcon: redHome,
          name: 'Home',
          contains: ['Home']
        }, {
          label: '9块9',
          icon: blackDiscout,
          selectIcon: redDiscount,
          name: 'Discount',
          contains: ['Discount']
        }, {
          label: '搜索',
          icon: blackSearch,
          selectIcon: redSearch,
          name: 'Category',
          contains: ['Category']
        }
      ],
      extraTabs: [
        {
          label: '我的',
          icon: blackProfile,
          selectIcon: redProfile,
          name: 'Profile',
          contains: ['Profile']
        }
      ],
      currentTab: {}
    }
  },
  methods: {
    selectedTab (tab) {
      if (this.currentTab.name === tab.name) {
        return true
      }

      var flag = 0
      tab.contains.map((item) => {
        if (item === this.$route.name) {
          flag += 1
        }
      })
      if (flag > 0) {
        this.currentTab = tab
        return true
      }

      return false
    },
    currentTabIcon (tab) {
      if (this.selectedTab(tab)) {
        return tab.selectIcon
      } else {
        return tab.icon
      }
    },
    goNav (tab) {
      this.currentTab = tab
      this.$router.push({name: tab.name})
    }
  },
  computed: {
    isExtraShow () {
      return Window.isWechat()
    }
  }
}
</script>
<style lang="sass">
@import '../styles/color.sass';
.tab-bar
  display: flex
  flex-direction: row
  justify-content: space-between
  align-items: stretch
  position: fixed
  background: $white
  width: 100%
  bottom: 0
  border-top: $gray-bg 1px solid
  padding: 4px 0px
  z-index: 99
  .tab-bar-item
    flex: 1 1
    display: flex
    flex-direction: column
    justify-content: space-between
    align-items: center
    img
      height: 24px
    span
      font-size: .8em
      color: $gray
      margin-top: 4px
    &.active span
      color: $red
</style>
